<script setup>
import { ref, onBeforeMount, onMounted, watch } from 'vue'
import { Delete, Edit, InfoFilled } from '@element-plus/icons-vue'

import {
  createGraduateService,
  deleteGraduateService,
  getGraduateColleges,
  getGraduateMajors,
  getGraduateMyInfoService,
  getGraduateYears,
  queryGraduatesByCondition,
  queryGraduatesByPersonal,
  updateGraduateService
} from '@/api/graduate'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tempStuList } from '@/assets/staticData'
import { ahColleges, ahCollegesMap, universityName } from '@/utils/otherUtils'
import { getGlobalCountriesService } from '@/api/otherApi'
import { getAreaListService, getCityListService, getProvinceListService } from '@/api/cityArea'
const years = ref([])
const colleges = ref([])
const majors = ref([])
const selectedYear = ref('')
const selectedCollege = ref('')
const selectedMajor = ref('')
// 页面加载时获取年份数据

// 年份变化时获取学院数据
const handleYearChange = async () => {
  selectedCollege.value = '' //空字符串时为假
  selectedMajor.value = ''
  majors.value = []
  console.log('年份变化', selectedYear.value)

  if (selectedYear.value) {
    const { data } = await getGraduateColleges(selectedYear.value)
    colleges.value = data
  } else {
    colleges.value = []
  }
}

// 学院变化时获取专业数据
const handleCollegeChange = async () => {
  selectedMajor.value = ''

  console.log('学院变化', selectedCollege.value)

  if (selectedYear.value && selectedCollege.value) {
    const { data } = await getGraduateMajors(selectedYear.value, selectedCollege.value)
    majors.value = data
  } else {
    majors.value = []
  }
}
const handleMajorChange = async () => {
  console.log('专业变化', selectedMajor.value)
}

// 处理分页逻辑
const onSizeChange = (size) => {
  pageParams.value.page = 1 // 重新从第一页渲染
  pageParams.value.pageSize = size // 更新每页条数
  getAllGraduateData()
}

const onCurrentChange = (page) => {
  // console.log(' 切换了');
  pageParams.value.page = page // 更新当前页
  getAllGraduateData()
}
const realName = ref('')
const userName = ref('')
const pageParams = ref({
  page: 1,
  pageSize: 10
})
// 新增毕业生数据
const graduateData = ref([])
const loading = ref(false)
const total = ref(0)
const getAllGraduateData = async () => {
  loading.value = true
  // 合并请求参数
  const requestParams = {
    //下面为一组查询条件
    graduationYear: selectedYear.value || '',
    college: selectedCollege.value || '',
    major: selectedMajor.value || '',

    //下面为一组查询条件
    realName: realName.value || '',
    userName: userName.value || '',

    //下面为一组查询条件
    ...pageParams.value
  }
  //去除空字符串属性
  for (let key in requestParams) {
    if (requestParams[key] === '') {
      delete requestParams[key]
    }
  }

  console.log('请求参数', requestParams)
  try {
    let response = tempStuList
    if (requestParams?.graduationYear || requestParams?.college || requestParams?.major) {
      response = await queryGraduatesByCondition(requestParams)
    } else if (requestParams?.realName || requestParams?.userName) {
      response = await queryGraduatesByPersonal(requestParams)
    } else {
      response = await queryGraduatesByCondition(requestParams)
    }

    console.log('请求结果列表', response.data.records)
    graduateData.value = response.data.records

    total.value = response.data.total
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}
onBeforeMount(async () => {
  const { data } = await getGraduateYears()
  years.value = data

  if (selectedYear.value) {
    const { data } = await getGraduateColleges(selectedYear.value)
    colleges.value = data
    // console.log('学院数据', colleges.value)
  } else {
    colleges.value = []
  }

  await getAllGraduateData()
})

// 添加重置方法
const handleResetFilter1 = async () => {
  selectedYear.value = ''
  selectedCollege.value = ''
  selectedMajor.value = ''
  colleges.value = []
  majors.value = []
  getAllGraduateData()
}

const handleResetFilter2 = async () => {
  realName.value = ''
  userName.value = ''
  getAllGraduateData()
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确认删除该毕业生信息？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    // 调用删除API
    console.log('执行删除操作', row)
    const { data } = await deleteGraduateService(row.userId)
    console.log('删除结果', data)
    ElMessage.success('删除成功')
    await getAllGraduateData()
  } catch {
    // 用户取消操作
  }
}
//渲染枚举属性,//1-admin,2-student,3-teacher,即管理员/学生/教师
const userRoleDesc = (code) => {
  const roleMap = {
    1: '管理员',
    2: '学生',
    3: '教师'
  }
  return roleMap[code] || '未知'
}
//渲染枚举属性,//1-employed已就业,2-unemployed待业中,3-furtherEducation深造
const employmentStatusDesc = (code) => {
  const statusMap = {
    1: '已就业',
    2: '待业中',
    3: '深造'
  }
  return statusMap[code] || '未知'
}

const dialogVisible = ref(false)
const isEdit = ref(false) //是否为编辑状态
const formRef = ref(null)
// 修改initialFormData为函数形式，每次返回新对象
const getInitialFormData = () => ({
  userId: null,
  resetPassword: false,
  college: '',
  major: '',
  password: '123456',
  graduationYear: new Date().getFullYear().toString(),
  employmentStatus: null,
  extendedInfo: {
    personalIntro: '',
    phone: '',
    email: '',
    realName: '',
    gender: '',
    birthDate: '',
    politicalStatus: ''
  },
  employmentInfo: {
    locationCountry: '中国',
    locationProvince: '',
    locationCity: '',
    locationDetail: '',
    jobTitle: ''
  },
  educationInfo: {
    undergraduateSchool: '北京大学',
    studyingAt: '',
    studyingMajor: ''
  }
})

// 初始化formData
const formData = ref(getInitialFormData())
const yearRange = ref([])
for (let year = 2000; year <= 2100; year++) {
  yearRange.value.push(year)
}
const collegeRange = ref([]) // 假设这是一个包含所有学院的数组
collegeRange.value = ahColleges

const majorRange = ref([]) // 假设这是一个包含所有专业的数组
//下拉框学院变动事件函数
const handleFormCollegeChange = (value) => {
  console.log('选中的学院:', value)
  // 根据选中的学院更新专业下拉框选项
  if (value && ahCollegesMap[value]) {
    majorRange.value = ahCollegesMap[value]
  } else {
    majorRange.value = []
  }
  // 重置已选专业
  formData.value.major = ''
}
// 政治面貌的选项
const politicalStatusOptions = ref([
  { label: '群众', value: '群众' },
  { label: '中共党员', value: '中共党员' },
  { label: '中共预备党员', value: '中共预备党员' },
  { label: '共青团员', value: '共青团员' },
  { label: '民革党员', value: '民革党员' },
  { label: '民盟盟员', value: '民盟盟员' },
  { label: '民建会员', value: '民建会员' },
  { label: '民进会员', value: '民进会员' },
  { label: '农工党党员', value: '农工党党员' },
  { label: '致公党党员', value: '致公党党员' },
  { label: '九三学社社员', value: '九三学社社员' },
  { label: '台盟盟员', value: '台盟盟员' },
  { label: '无党派人士', value: '无党派人士' }
])

const globalCountryRange = ref([]) // 全球国家
// 获取全球国家列表
const getGlobalCountries = async () => {
  const {
    data: { data }
  } = await getGlobalCountriesService()
  // console.log(data)
  // 1. 提取所有中文名称到新数组
  const cnNames = data.map((item) => item.m_cn_name)
  // 2. 按拼音逆序排序（使"中国"在前）
  const sortedNames = cnNames.sort((a, b) => b.localeCompare(a, 'zh'))
  // console.log('按拼音逆序排序:', sortedNames)
  globalCountryRange.value = sortedNames
}

const municipalities = ['北京', '上海', '天津', '重庆']
const municipalitiesSuffix = ['北京市', '上海市', '天津市', '重庆市']
const getProvinces = async () => {
  const res = await getProvinceListService()
  // console.log(res.data.list);
  //如果是直辖市,需要增添末尾的'市'字
  provinceRange.value = res.data.list.map((item) => {
    if (municipalities.includes(item)) {
      item = item + '市'
    }
    return item
  })
}

const provinceRange = ref([]) // 省份
const cityRange = ref([]) // 城市
const getCities = async (province) => {
  if (!province) {
    return
  }
  // 处理4个直辖市特殊情况
  if (municipalitiesSuffix.includes(province)) {
    const cname = province.slice(0, -1) // 去掉末尾的'市'字
    // 直辖市直接获取区县数据
    const res = await getAreaListService({
      pname: cname,
      cname: province
    })
    cityRange.value = res.data.list
    return
  }
  // 非直辖市正常获取城市数据
  const res = await getCityListService(province)
  cityRange.value = res.data.list
}
const handleProvinceChange = (value) => {
  formData.value.employmentInfo.locationCity = '' // 清空城市选择
  getCities(value) // 获取新省份下的城市
}
// 加载时立刻触发
watch(
  () => formData.value.employmentStatus,
  (newVal) => {
    if (newVal === 2) {
      //如果待业中
      formData.value.employmentInfo.locationCountry = ''
    } else if (newVal === 1) {
      //如果已就业
      formData.value.employmentInfo.locationCountry = '中国'
    }
  }
)

//深造院校选项数组
const universityOptions = ref([])
const optStudyingAtLoading = ref(false)

const loadUniversities = async (search = '') => {
  optStudyingAtLoading.value = true
  try {
    // 模拟搜索过滤
    await new Promise((resolve) => setTimeout(resolve, 200)) // 模拟延迟
    universityOptions.value = universityName.filter((item) => item.includes(search)).slice(0, 50) // 每次只加载50条
  } finally {
    optStudyingAtLoading.value = false
  }
}
// 初始化加载
onMounted(() => {
  loadUniversities()
  getGlobalCountries()
  getProvinces()
})

const rules = {
  graduationYear: [{ required: true, message: '请选择毕业年份', trigger: 'blur' }],
  college: [{ required: true, message: '请输入学院', trigger: 'blur' }],
  major: [{ required: true, message: '请选择专业', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '密码长度在6到15个字符之间', trigger: 'blur' }
  ],
  extendedInfo: {
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    birthDate: [
      { required: true, message: '请选择出生日期', trigger: ['blur', 'change'] },
      {
        type: 'date', // 显式声明类型为日期
        message: '日期格式无效',
        trigger: 'change'
      },
      {
        validator: (rule, value) => {
          const selectedDate = new Date(value)
          const minDate = new Date()
          minDate.setFullYear(minDate.getFullYear() - 16)
          return selectedDate <= minDate
        },
        message: '出生日期必须至少是16年前',
        trigger: 'change'
      }
    ],
    politicalStatus: [{ required: true, message: '请选择政治面貌', trigger: 'change' }]
  },
  employmentInfo: {
    locationCountry: [{ required: true, message: '请选择所在国家', trigger: 'change' }],
    locationProvince: [{ required: true, message: '请选择所在省份/市', trigger: 'change' }],
    locationCity: [{ required: true, message: '请选择所在城市/区', trigger: 'change' }],
    locationDetail: [
      { required: true, message: '请输入详细地址', trigger: 'blur' },
      { min: 5, max: 100, message: '长度在5到100个字符之间', trigger: 'blur' }
    ],
    jobTitle: [
      { required: true, message: '请输入职位名称', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在2到50个字符之间', trigger: 'blur' }
    ]
  },
  educationInfo: {
    undergraduateSchool: [{ required: true, message: '请输入本科毕业院校', trigger: 'blur' }],
    studyingAt: [{ required: true, message: '请选择研究生院校', trigger: 'change' }],
    studyingMajor: [{ required: false, message: '请输入研究生专业', trigger: 'blur' }]
  },

  // employmentStatus: {
  //   code: [{ required: true, message: '请选择就业状态', trigger: 'change' }]
  // }
  employmentStatus: [{ required: true, message: '请选择就业状态', trigger: 'change' }]
}

// 点击新增毕业生弹窗
const handleAddStudent = async () => {
  // 只有在从编辑状态切换到新增状态时才重置表单
  if (isEdit.value) {
    formData.value = getInitialFormData()
  }
  isEdit.value = false
  dialogVisible.value = true
}
// 点击提交按钮
const handleSubmit = async () => {
  try {
    await formRef.value.validate();

    // 浅拷贝足够，因为我们只修改employmentInfo的引用
    const submitData = { ...formData.value };

    // 状态2和3的处理逻辑相同
    if ([2, 3].includes(submitData.employmentStatus)) {
      // 最高效的批量赋空值方法
      submitData.employmentInfo = Object.fromEntries(
        Object.keys(submitData.employmentInfo).map(key => [key, ''])
      );
    }
    console.log('提交的数据', submitData); // 确保employmentInfo已清空

    const { data } = isEdit.value
      ? await updateGraduateService(submitData.userId, submitData)
      : await createGraduateService(submitData);
      console.log('操作成功,返回数据:', data);

    ElMessage.success(isEdit.value ? '更新成功' : '新增成功');
    dialogVisible.value = false;
    await getAllGraduateData();
  } catch (error) {
    console.error('操作失败:', error);
  }
}

// 修改编辑方法
const handleEdit = async (row) => {
  isEdit.value = true
  dialogVisible.value = true
  console.log('编辑数据', row)
  const { data } = await getGraduateMyInfoService(row.userId)
  const graduateInfo = data
  console.log('获取到学生全部的信息', graduateInfo)
  // 填充表单数据 - 逐个赋值方式
  formData.value.userId = row.userId
  formData.value.userName = graduateInfo.userName
  formData.value.college = graduateInfo.college
  formData.value.major = graduateInfo.major
  formData.value.graduationYear = graduateInfo.graduationYear
  formData.value.employmentStatus = graduateInfo.employmentStatus.code

  // 处理嵌套对象
  // 处理嵌套对象 - 使用展开运算符
  formData.value.extendedInfo = { ...graduateInfo.extendedInfo }
  formData.value.employmentInfo = { ...graduateInfo.employmentInfo }
  formData.value.educationInfo = { ...graduateInfo.educationInfo }
}

const resetPassword = async (row) => {
  try {
    await ElMessageBox.confirm('确认重置该学生密码？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    // 调用重置密码API
    console.log('执行重置密码操作', row)
    // const { data } = await resetGraduatePasswordService(row.userId)
    // console.log('重置密码结果', data)
    ElMessage.success('密码重置成功')
    await getAllGraduateData()
  } catch (error) {
    console.error('密码重置失败:', error)
  }
}
</script>

<template>
  <div class="student-management">
    <!-- 筛选条件一 -->
    <el-card class="filter-card">
      <div class="filter_flex">
        <el-col :span="5">
          <el-form-item label="毕业年份：" class="filter-label">
            <el-select
              v-model="selectedYear"
              placeholder="请选择"
              @change="handleYearChange"
              clearable
              style="width: 100%"
            >
              <el-option v-for="year in years" :key="year" :label="year" :value="year" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="所属学院：" class="filter-label">
            <el-select
              v-model="selectedCollege"
              placeholder="请选择"
              @change="handleCollegeChange"
              clearable
              :disabled="!selectedYear"
              style="width: 100%"
            >
              <el-option
                v-for="college in colleges"
                :key="college"
                :label="college"
                :value="college"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="所属专业：" class="filter-label">
            <el-select
              v-model="selectedMajor"
              placeholder="请选择"
              @change="handleMajorChange"
              clearable
              :disabled="!selectedCollege"
              style="width: 100%"
            >
              <el-option v-for="major in majors" :key="major" :label="major" :value="major" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="5" class="button-group">
          <el-button type="primary" @click="getAllGraduateData">搜索</el-button>
          <el-button @click="handleResetFilter1">重置</el-button>
        </el-col>
        <el-col :span="3" class="text-right">
          <el-button type="success" @click="handleAddStudent">新增学生</el-button>
        </el-col>
      </div>
    </el-card>

    <!-- 筛选条件二 -->
    <el-card class="filter-card">
      <div class="filter_flex">
        <el-col :span="5">
          <el-form-item label="真实姓名：" class="filter-label">
            <el-input v-model.trim="realName" placeholder="请输入" clearable style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="学工号：" class="filter-label">
            <el-input v-model.trim="userName" placeholder="请输入" clearable style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="5" class="button-group">
          <el-button type="primary" @click="getAllGraduateData">搜索</el-button>
          <el-button @click="handleResetFilter2">重置</el-button>
        </el-col>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card>
      <el-table :data="graduateData" v-loading="loading" style="width: 100%" stripe>
        <el-table-column prop="userName" label="学工号" width="100" />
        <el-table-column prop="graduationYear" label="毕业年份" width="80" />

        <el-table-column label="真实姓名" width="80">
          <template #default="{ row }">
            {{ row.extendedInfo?.realName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="性别" width="80">
          <template #default="{ row }">
            {{ row.extendedInfo?.gender || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="college" label="学院" />
        <el-table-column prop="major" label="专业" />
        <!-- 电话 -->
        <el-table-column label="电话" width="116">
          <template #default="{ row }">
            <span v-if="row.extendedInfo?.phone">
              {{ row.extendedInfo.phone }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- 政治面貌 -->
        <el-table-column label="政治面貌" width="80">
          <template #default="{ row }">
            <span v-if="row.extendedInfo?.politicalStatus">
              {{ row.extendedInfo.politicalStatus }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- 出生日期 -->
        <el-table-column label="出生日期">
          <template #default="{ row }">
            <span v-if="row.extendedInfo?.birthDate">
              {{ row.extendedInfo.birthDate }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!--    <!~~ 毕业时的本校学位 ~~>
        <el-table-column label="毕业时的本校学位" width="80">
          <template #default="{ row }">
            <span v-if="row.extendedInfo?.degree">
              {{ row.extendedInfo.degree }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
-->
        <el-table-column label="就业状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="
                {
                  1: 'success',
                  2: 'warning',
                  3: 'info'
                }[row.employmentStatus?.code]
              "
            >
              {{ employmentStatusDesc(row.employmentStatus?.code) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="职位/深造院校">
          <template #default="{ row }">
            <div v-if="row.employmentInfo?.jobTitle">
              {{ row.employmentInfo.jobTitle }} ({{
                row.employmentInfo.locationProvince + row.employmentInfo.locationCity
              }})
            </div>
            <div v-else-if="row.educationInfo?.studyingAt">
              {{ row.educationInfo.studyingAt }}
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="用户角色" width="100">
          <template #default="{ row }">
            <el-tag effect="plain">
              {{ userRoleDesc(row.userRole?.code) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)" :icon="Edit" />
            <el-button type="danger" size="small" @click="handleDelete(row)" :icon="Delete" />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        v-model:current-page="pageParams.page"
        v-model:page-size="pageParams.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑学生信息' : '新增学生'" width="800px">
      <el-form :model="formData" :rules="rules" label-width="120px" ref="formRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- 基本信息 -->
            <el-form-item v-if="isEdit" label="学工号" prop="userName">
              <el-input :value="formData.userName" disabled placeholder="请输入学工号" />
            </el-form-item>
            <el-form-item label="毕业年份" prop="graduationYear">
              <el-select v-model="formData.graduationYear" filterable placeholder="请选择毕业年份">
                <el-option v-for="year in yearRange" :key="year" :label="year" :value="year" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属学院" prop="college">
              <el-select
                v-model="formData.college"
                filterable
                placeholder="请选择学院"
                @change="handleFormCollegeChange"
              >
                <el-option
                  v-for="college in collegeRange"
                  :key="college"
                  :label="college"
                  :value="college"
                />
              </el-select>
            </el-form-item>
            <!-- 专业选择器部分 -->
            <el-form-item label="所属专业" prop="major">
              <el-select
                v-model="formData.major"
                filterable
                placeholder="请选择专业"
                :disabled="!formData.college"
              >
                <el-option v-for="major in majorRange" :key="major" :label="major" :value="major" />
              </el-select>
            </el-form-item>
            <!-- 本科毕业院校  -->
            <!--             <el-form-item label="本科毕业院校" prop="educationInfo.undergraduateSchool">
              <el-input :value="formData.educationInfo.undergraduateSchool" disabled />
            </el-form-item> -->
            <!-- 初始密码 -->
            <el-form-item v-if="!isEdit" label="初始密码" prop="password">
              <el-input
                v-model.trim="formData.password"
                :disabled="true"
                placeholder="默认密码：123456"
              />
              <!-- <el-tooltip
                content="管理员创建账户时默认密码为123456，用户首次登录需修改"
                placement="top"
              >
              <el-icon><InfoFilled /></el-icon>
              </el-tooltip> -->
            </el-form-item>
            <!-- 重置初始密码 -->
           <!--  <el-form-item v-if="isEdit" label="重置初始密码" prop="password">
              <el-button type="text" @click="resetPassword">重置密码</el-button>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <!-- 扩展信息 -->
            <el-form-item label="真实姓名" prop="extendedInfo.realName">
              <el-input
                v-model.trim="formData.extendedInfo.realName"
                placeholder="请输入真实姓名"
              />
            </el-form-item>
            <el-form-item label="性别" prop="extendedInfo.gender">
              <el-select v-model="formData.extendedInfo.gender">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="extendedInfo.birthDate">
              <el-date-picker
                v-model="formData.extendedInfo.birthDate"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="政治面貌" prop="extendedInfo.politicalStatus">
              <el-select
                v-model="formData.extendedInfo.politicalStatus"
                placeholder="请选择政治面貌"
              >
                <el-option
                  v-for="item in politicalStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="就业状态" prop="employmentStatus">
          <el-select v-model="formData.employmentStatus">
            <el-option label="已就业" :value="1" />
            <el-option label="待业中" :value="2" />
            <el-option label="深造中" :value="3" />
          </el-select>
        </el-form-item>
        <!-- 工作信息,已就业 -->
        <div v-if="formData.employmentStatus === 1">
          <!-- 所在国家 -->
          <el-form-item label="所在国家" :prop="'employmentInfo.locationCountry'">
            <el-select filterable v-model="formData.employmentInfo.locationCountry">
              <el-option
                v-for="country in globalCountryRange"
                :key="country"
                :label="country"
                :value="country"
              />
            </el-select>
          </el-form-item>
          <!-- 所在省份/市 -->
          <el-form-item label="所在省份/市" :prop="'employmentInfo.locationProvince'">
            <el-select
              v-model="formData.employmentInfo.locationProvince"
              @change="handleProvinceChange"
              placeholder="请选择省份/市"
            >
              <el-option
                v-for="province in provinceRange"
                :key="province"
                :label="province"
                :value="province"
              />
            </el-select>
          </el-form-item>
          <!-- 所在城市/区 -->
          <el-form-item label="所在城市/区" :prop="'employmentInfo.locationCity'">
            <el-select
              v-model="formData.employmentInfo.locationCity"
              :disabled="!formData.employmentInfo.locationProvince"
              placeholder="请选择城市/区"
            >
              <el-option v-for="city in cityRange" :key="city" :label="city" :value="city" />
            </el-select>
          </el-form-item>
          <!-- 详细地址 -->
          <el-form-item label="详细地址" :prop="'employmentInfo.locationDetail'">
            <el-input
              placeholder="请输入详细地址"
              v-model.trim="formData.employmentInfo.locationDetail"
            />
          </el-form-item>
          <!-- 职位名称 -->
          <el-form-item label="职位名称" :prop="'employmentInfo.jobTitle'">
            <el-input
              placeholder="请输入职位名称"
              v-model.trim="formData.employmentInfo.jobTitle"
              :disabled="formData.employmentStatus === 2"
            />
          </el-form-item>
        </div>
        <!-- 工作信息,待业中 -->
        <div v-if="formData.employmentStatus === 2">
          <!-- 无需填写 -->
          <el-form-item label="无更多字段"></el-form-item>
        </div>

        <!-- 深造信息 -->
        <div v-if="formData.employmentStatus === 3">
          <!-- 最高学位毕业院校 -->
          <el-form-item label="当前深造院校" prop="educationInfo.studyingAt">
            <el-select
              clearable
              filterable
              remote
              :remote-method="loadUniversities"
              :loading="optStudyingAtLoading"
              v-model="formData.educationInfo.studyingAt"
            >
              <el-option
                v-for="campus in universityOptions"
                :key="campus"
                :label="campus"
                :value="campus"
              />
            </el-select>
          </el-form-item>
          <!-- 研究生在读专业  -->
          <el-form-item label="研究生在读专业" prop="educationInfo.studyingMajor">
            <el-input
              v-model.trim="formData.educationInfo.studyingMajor"
              placeholder="请输入研究生在读专业"
            />
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
/* 组件作用域样式 */
.student-management {
  .filter-card {
    margin-bottom: 20px;

    .el-row {
      margin-bottom: -20px;
    }

    .filter-label {
      :deep(.el-form-item__label) {
        padding-right: 10px;

        &::after {
          content: none;
        }
      }
    }
    .filter_flex {
      display: flex;
      align-items: center;
      gap: 10px;
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .button-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .text-right {
      text-align: right;
    }
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }

  .el-table {
    :deep(.el-button) {
      padding: 6px;
    }
  }
}
</style>
